<!-- 服务区域 -->
<template>
	<view class="service-area-page">
		<view class="card-cls">
			<view class="flex-align-center p-bottom20">
				<text></text>
				<view class="font36">当前位置 </view>
			</view>

			<view class="font30">{{city}}</view>
			<view class="address-cls">{{address}}</view>
			<view class="flex-between p-align30">
				<view class="flex-align-center">
					<!-- <view class="font36">手动设置</view> -->
					<!-- <image></image> -->
				</view>
				<view class="sign-btn" @click="signInFn()">签到</view>
			</view>
		</view>
		<view class="card-cls">
			<view class="flex-between p-bottom30 border">
				<text class="color999">服务区域</text>
				<view>{{city}} {{district}}</view>

			</view>
			<map @tap="(event)=>taps(event)" style="width: 100%; height: 163px;" :latitude="lat" :longitude="lng"
				:markers="covers"></map>

			<view class="p-align-top20"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	// 获取地址工具
	import {
		getlocation
	} from './utils.js'
	export default {
		data() {
			return {
				index: '',
				menkey: '',
				address2: 'https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1697189206362.jpg',
				optEmpty: {
					tip: '未获取到当前位置'
				},
				list: [],
				logo: 'https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1697189206362.jpg',
				id: 0,
				// 使用 marker点击事件 需要填写id
				title: 'map',
				lat: '',
				lng: '',
				aa: '',
				bb: '',
				latitude: 39.909,
				longitude: 116.39742,
				address: '',
				covers: [{
					latitude: '',
					longitude: '',
					iconPath: '/static/Vector-1.png',
					width: 20,
					height: 20
				}],
				district: "",
				city: '',
				form: {

				}
			};
		},
		onLoad() {
			// this.getAuthorizeInfo();
			this.getLocations()
		},
		computed: {
			...mapGetters('user', ['taskCenter', 'technicianDetails']),
		},

		methods: {

			...mapMutations('user', ['uploadTaskCenter']),
			// （获取当前位置）
			// getAuthorizeInfo() {
			// 	const that = this;
			// 	uni.authorize({
			// 		scope: 'scope.userLocation',
			// 		success() {
			// 			// 允许授权
			// 			that.getLocations();

			// 		},
			// 		fail() {
			// 			// 拒绝授权
			// 			that.openConfirm();
			// 		}
			// 	});
			// },
			// //获得地理位置经纬度
			// getLocations() {
			// 	uni.getLocation({
			// 		// 将wgs84 改为 gcj02  h5提高精确度
			// 		type: 'gcj02',
			// 		//  geocode: true,   address：地址信息（仅App端支持，需配置geocode为true）
			// 		success: res => {
			// 			this.lat = res.latitude;
			// 			this.lng = res.longitude;
			// 			// 获取当前经纬度  存缓存  在计算差距离的时候 调用
			// 			wx.setStorageSync('lat', this.lat);
			// 			wx.setStorageSync('lng', this.lng);

			// 		},
			// 		fail: res => {
			// 			this.lat = res.latitude;
			// 			this.lng = res.longitude;
			// 		}
			// 	});
			// },
			// 当用户第一次拒绝后再次请求授权
			// openConfirm() {
			// 	uni.showModal({
			// 		title: '请求授权当前位置',
			// 		content: '需要获取您的地理位置，请确认授权',
			// 		success: res => {
			// 			this.upCallback();
			// 			if (res.confirm) {
			// 				this.upCallback();
			// 				uni.openSetting(); // 打开地图权限设置
			// 			} else if (res.cancel) {
			// 				uni.showToast({
			// 					title: '你拒绝了授权，无法获得周边信息',
			// 					icon: 'none',
			// 					duration: 10
			// 				});
			// 				this.$sun.toast('定位失败');
			// 			}
			// 		}
			// 	});
			// },
			// 点击导航调用
			// async address(tiem) {
			// 	//纬度
			// 	var latitude = parseFloat(tiem.store_addres_lat);
			// 	//经度
			// 	var longitude = parseFloat(tiem.store_addres_lng);
			// 	// 百度地图经纬度转腾讯地图经纬度
			// 	var x_pi = 3.14159265358979324;
			// 	var x = parseFloat(tiem.store_addres_lat) - 0.0065;
			// 	var y = parseFloat(tiem.store_addres_lng) - 0.006;
			// 	var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
			// 	var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
			// 	var lat = (z * Math.cos(theta)).toFixed(7);
			// 	var lng = (z * Math.sin(theta)).toFixed(7);
			// 	//定位地方名称
			// 	var name = tiem.store_name;
			// 	const map = await this.$sun.openLocation({
			// 		//拿到上面的计算好的（百度经纬度转腾讯经纬度）经纬度 进行一个赋值
			// 		lat: lat,
			// 		lng: lng,
			// 		name: tiem.store_name,
			// 		address: tiem.store_addres,
			// 		key: this.menkey
			// 	});
			// },
			taps(e) {
				// console.log(e.target.latitude)
				// console.log(e.longitude.longitude)
				this.lat2 = e.target.latitude
				this.lng2 = e.target.longitude
				// 改变标记点
				this.covers[0].latitude = this.lat2
				this.covers[0].longitude = this.lng2
				this.currentTapMap2(this.lat2, this.lng2)
			},
			// 点击获取实时地址
			async currentTapMap2(lat2, lng2) {
				const result = await this.$sun.location({
					lat: lat2,
					lng: lng2,
					key: wx.getStorageSync('system').tencentMapKey?wx.getStorageSync('system').tencentMapKey:'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI'
				})
				console.log(result)
				this.address = result.address
				this.city = result.address_component.city
				this.district = result.address_component.district
			},
			//获得地理位置经纬度
			async getLocations() {
				console.log('123')
				const map = await this.$sun.latlng();
				this.lat = map.lat;
				this.lng = map.lng;
				wx.setStorageSync('lat', this.lat);
				wx.setStorageSync('lng', this.lng);
				// this.upCallback();
				this.covers[0].latitude = this.lat
				this.covers[0].longitude = this.lng
				const map2 = await this.$sun.location({
					lat: map.lat,
					lng: map.lng,
					key: wx.getStorageSync('system').tencentMapKey?wx.getStorageSync('system').tencentMapKey:'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI'
				});
				this.address = map2.address
				this.city = map2.address_component.city
				this.district = map2.address_component.district
				
				// uni.getLocation({
				// 	// 将wgs84 改为 gcj02  h5提高精确度
				// 	type: 'gcj02',
				// 	//  geocode: true,   address：地址信息（仅App端支持，需配置geocode为true）
				// 	success: async res => {
				// 		console.log(res)
				// 		this.lat = res.latitude;
				// 		this.lng = res.longitude;
				// 		// 获取当前经纬度  存缓存  在计算差距离的时候 调用
				// 		wx.setStorageSync('lat', this.lat);
				// 		wx.setStorageSync('lng', this.lng);
				// 		this.upCallback();
				// 		console.log(this.lat,this.lng)
				// 		this.covers[0].latitude = this.lat
				// 		this.covers[0].longitude = this.lng
				// 		const result = await this.$sun.location({
				// 			lat:this.lat,
				// 			lng:this.lng,
				// 			key:'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI'
				// 		})
				// 		console.log(result)
				// 		this.address=result.address
				// 		this.city=result.address_component.city
				// 		this.district=result.address_component.district


				// 	},
				// 	fail: re => {
				// 		console.log('123',re)
				// 		this.lat = res.latitude;
				// 		this.lng = res.longitude;
				// 	}
				// });
			},

			async signInFn(e) {

				this.getLocations()
				// 查询当前的 技师的状态 如果 并且不值传过去
				console.log(this.technicianDetails)
				this.form = this.technicianDetails
				this.form.latitude = this.lat
				this.form.accuracy = this.lng
				// this.form.latitude=26.46098
				// this.form.accuracy=111.59244
				console.log(this.form)
				// 提交所有的认证信息
				const saveRes = await this.$http.put({
					url: this.$api.technicianModifyIphone,
					data: {
						...this.form
					}
				});
				if (saveRes.code == 200) {
					console.log('result.data', saveRes);
					this.$sun.toast('签到成功');
					  this.$sun.navBack();

					// this.$sun.navGo('/pages/technician/settleIn/settleln-process');
				} else {

					console.log('result.msg', saveRes.msg);
					  this.$sun.navBack();
				}
				//  console.log('131')
				// let myThis = this;

				// uni.navigateTo({
				// 	url: '/pages/service-area/h5map'
				// })
				this.uploadTaskCenter({
					status: true,
					name: 'serviceItems'
				})
				// this.$sun.navSwitch('/pages/my/my');


			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}

	.service-area-page {
		.card-cls {
			background-color: #fff;
			margin: 20rpx;
			padding: 26rpx 26rpx 0;
			border-radius: 20rpx;

			.address-cls {
				color: #999;
				font-size: 24rpx;
				padding: 10rpx 0 20rpx;
				border-bottom: 2rpx solid #f6f6f6;
			}

			.sign-btn {
				font-size: 36rpx;
				padding: 16rpx 50rpx;
				color: #fff;
				border-radius: 10rpx;
				background-color: forestgreen;
			}
		}
	}
</style>